@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.inst-status-icon {
  display: inline-block;
  vertical-align: top;
  &-cancelling,
  &-running {
    color: $primary-brand;
    .next-icon {
      animation: circle 2s infinite linear;
    }
  }
  &-skip,
  &-success,
  &-finish {
    color: $primary-success;
  }
  &-canceled,
  &-cancel,
  &-fail {
    color: $primary-danger;
  }
  &-init {
    color: $gray-06;
  }
  &-waiting {
    color: $primary-warning;
  }
}

.inst-status-label {
  display: inline-block;
  height: 28px;
  border-radius: 4px;
  padding: 4px 8px;
  .inst-status-icon {
    display: inline-block;
    margin-right: 8px;
  }
  &-cancelling,
  &-running {
    color: $primary-brand;
    // background: rgba($primary-brand,.10)
  }
  &-skip,
  &-success,
  &-finish {
    color: $primary-success;
    // background: rgba($primary-success, 0.1);
  }
  &-canceled,
  &-cancel,
  &-fail {
    color: $primary-danger;
    // background: rgba($primary-danger,.10)
  }
  &-init {
    color: $gray-04;
    // background: rgba($gray-04, 0.1);
  }
  &-waiting {
    color: $primary-warning;
    // background: rgba($primary-warning, 0.1);
  }
}
